<template>
    <el-dialog
      v-model="props.editCenterDialogVisible"
      title="编辑用户信息"
      width="30%"
      align-center
      @close="closeDialog"
    >
      <div class="app-container">
        <el-card class="box-card">
          <el-form 
            :model="localUserInfo" 
            label-width="120px" 
            :rules="formRules" 
            ref="form"  
            status-icon
          >
            <el-form-item label="用户名" :label-width="labelWidth" prop="username">
              <el-input v-model="localUserInfo.username" placeholder="请输入用户名" />
            </el-form-item>
  
            <el-form-item label="邮箱" :label-width="labelWidth" prop="email">
              <el-input v-model="localUserInfo.email" placeholder="请输入邮箱" />
            </el-form-item>
  
            <el-form-item label="电话" :label-width="labelWidth" prop="phonenumber">
              <el-input v-model="localUserInfo.phonenumber" placeholder="请输入电话" />
            </el-form-item>
  
            <el-form-item label="备注" :label-width="labelWidth" prop="remark">
              <el-input type="textarea" v-model="localUserInfo.remark" placeholder="请输入备注" />
            </el-form-item>
  
            <el-form-item>
              <el-button type="primary" @click="submitForm">保存</el-button>
              <el-button @click="resetForm">重置</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </div>
    </el-dialog>
  </template>
  
  <script setup>
  import { ref, defineProps, defineEmits, watch } from 'vue';
  
  // 父组件传递的数据
  const props = defineProps({
    editCenterDialogVisible: {
      type: Boolean,
      default: false
    },
    userInfo: {
      type: Object,
      default: () => ({
        id:null,
        username: '',
        email: '',
        phonenumber: '',
        remark: ''
      })
    }
  });
  
  // 触发父组件事件
  const emit = defineEmits(['update:editCenterDialogVisible', 'saveUserInfo']);
  
  const labelWidth = '120px';  // label宽度（可以根据需要调整）
  
  // 本地数据，用于表单双向绑定
  const localUserInfo = ref({ ...props.userInfo });  // 初始化为传入的 userInfo
  
  // 监听父组件传递的 userInfo，保持同步
  watch(() => props.userInfo, (newValue) => {
    localUserInfo.value = { ...newValue };  // 确保本地数据与 props 一致
  }, { immediate: true });
  
  // 表单验证规则
    const formRules = {
    username: [
        { required: true, message: '用户名不能为空', trigger: 'blur' },
        { min: 3, max: 20, message: '用户名长度应为 3 至 20 个字符', trigger: 'blur' }
    ],
    email: [
        // { required: true, message: '邮箱不能为空', trigger: 'blur' },
        { type: 'email', message: '请输入有效的邮箱地址', trigger: ['blur', 'change'] }
    ],
    phonenumber: [
        // { required: true, message: '电话号码不能为空', trigger: 'blur' },
        { pattern: /^1[3-9]\d{9}$/, message: '请输入有效的电话号码', trigger: ['blur', 'change'] }
    ],
    remark: [
        { required: false, message: '备注不能为空', trigger: 'blur' }
    ]
    };
    
    // 定义表单引用
    const form = ref(); // 使用ref来定义form的引用
  // 提交表单
  const submitForm = () => {
    // 校验表单是否有效
    form.value.validate((valid) => {
      if (valid) {
        // 触发父组件保存事件
        emit('saveUserInfo', localUserInfo.value);
        // 关闭弹窗
        emit('update:editCenterDialogVisible', false);
      } else {
        console.log('表单校验失败');
      }
    });
  };
  
  // 重置表单
  const resetForm = () => {
    console.log("重置表单")
    // 重置表单数据
    localUserInfo.value = { ...props.userInfo };
  };
  
  // dialog关闭回调
  const closeDialog = () => {

    emit('update:editCenterDialogVisible',false)
  };
  </script>
  
  <style scoped>
  .dialog-footer button:first-child {
    margin-right: 10px;
  }
  </style>
  